<template>
  <div class="healthInfo padding_20">
    <el-input v-model="param.orderNumber"
              placeholder="订单编号"
              class="w-200"
              @clear="handle(1,0)"
              clearable></el-input>
    <el-input v-model="param.userName"
              placeholder="用户姓名"
              class="w-200"
              @clear="handle(1,0)"
              clearable></el-input>
    <el-input v-model="param.phone"
              placeholder="电话"
              class="w-200"
              @clear="handle(1,0)"
              clearable></el-input>
    <el-select v-model="param.orderStatus"
               clearable
               placeholder="全部订单状态"
               @change="handle(1,0)"
               class="w-200">
      <el-option label="使用中"
                 :value="3"></el-option>
      <el-option label="已过期"
                 :value="8"></el-option>
    </el-select>

    <el-button @click="handle(1,0)"
               type="primary">查 询</el-button>
    <el-button @click="handle(3,0)"
               type="primary">导 出</el-button>
    <el-table :data="tableData"
              style="width: 100%"
              border
              class="mt-20">
      <el-table-column align="center"
                       prop="orderNumber"
                       label="订单编号"
                       width="200"></el-table-column>
      <el-table-column align="center"
                       prop="channelName"
                       label="订单来源"></el-table-column>
      <el-table-column align="center"
                       prop="salesForce"
                       label="推销账号"></el-table-column>

      <el-table-column align="center"
                       label="来源医院"
                       prop="hospitalName"></el-table-column>
      <el-table-column align="center"
                       label="用户姓名"
                       prop="userName"></el-table-column>
      <el-table-column align="center"
                       label="电话"
                       prop="phone"></el-table-column>
      <el-table-column align="center"
                       label="价格（元）"
                       prop="money"></el-table-column>
      <el-table-column align="center"
                       label="下单时间"
                       prop="createTime">
        <template slot-scope="scope">
          <span>{{commonFunction.timestampFormat(new Date(scope.row.createTime), 'yyyy-MM-dd hh:mm')}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"
                       prop="orderStatus"
                       label="订单状态">
        <template slot-scope="scope">
          <span :style="{color:scope.row.reserveStatus == 8 ?'red':''}">{{scope.row.orderStatus == 3?'使用中':'已过期'}}</span>
        </template>
      </el-table-column>

    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "faceConsultation",//100包销售订单
    data () {
      return {
        param: {},
        tableData: [{ title: '张三' }],
        pageTotal: 0,
        typeItems: [{
          value: 1,
          name: '三级甲等'
        }, {
          value: 0,
          name: '三级乙等'
        }],
        showdialog: false,
        dialogData: {
          show: true,
          info: {}
        },
        chooseHowmuch: 0,
      }
    },
    mounted () {
      this._getList()
    },
    methods: {

      exportExcel () {
        this.loading = true
        this.loadingText = '正在导出...'
        this.$axios({
          url: this.api.cooperationHospital.exportHealthSale,
          method: 'post',
          responseType: 'blob', // 服务器返回的数据类型
          params: this.param,
          data: this.param
        }).then((res) => {
          this.loading = false
          const content = res.data
          const blob = new Blob([content]) // 构造一个blob对象来处理数据
          const fileName = '100包销售订单.xls' // 导出文件名
          if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
            const link = document.createElement('a') // 创建a标签
            link.download = fileName // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href) // 释放url
            document.body.removeChild(link) // 释放标签
          } else { // 其他浏览器
            navigator.msSaveBlob(blob, fileName)
          }
        }).catch((error) => {
          this.loading = false
        })
      },

      handle (index, row) {
        switch (index) {
          case 1:
            this.page.pageIndex=0
            this._getList()
            break
          case 3:
            this.exportExcel()
            break;
        }

      },
      _getList () {
        this.param.pageIndex = this.page.pageIndex
        this.param.pageSize = this.page.pageSize

        this.post(this.api.cooperationHospital.getHealthSalePage, this.param).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object
            this.pageTotal = res.data.totalNum
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      handleAvatarSuccess (res) {
        this.form.certUrl = res.data;
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .information {
    margin: 10px 0px 0px 0px;
  }

  .btn_1 {
    margin-left: 10px;
  }

  .el-select {
    width: 90%;
  }

  .editorForm {
    height: 750px;
  }

  .editor {
    position: fixed;
    margin-left: -70px;
    width: 70%;
    height: 700px;
    float: left;
  }

  .info {
    height: 750px;
    width: 30%;
    position: absolute;
    top: 78px;
  }

  .info .el-input {
    width: 90%;
  }

  .avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px dashed #606266;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .formTitle {
    display: inline-block;
    line-height: 24px;
    font-size: 18px;
    color: #303133;
  }

  .return {
    float: right;
  }
</style>
